import React from 'react';
import { Form, DatePicker, Input, Select, Alert, Row, Col } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
const { TextArea } = Input;
const { Option } = Select;
import styles from './styles.less';

class Buy extends React.Component<any, any> {
  state = {
    unit: null,
    scale: '0.4',
  };

  handleSelect = (value: any) => {
    this.setState({
      unit: value,
    });
  };
  handleSubmit = () => {
    const { unit } = this.state;
    const { close, submit } = this.props;
    const { id, quantityComments } = this.props.view;
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        const data = {
          type: 0,
          id: id,
          ...values,
          dealTime: new Date(values.dealTime).getTime(),
          quantityComments: unit ? unit : quantityComments,
          companyPrice: Number(values.companyPrice),
          companyProfitProportion: Number(values.companyProfitProportion),
          freight: Number(values.freight),
          quantity: Number(values.quantity),
          staffId: Number(values.staffId),
          staffPrice: Number(values.staffPrice),
          wineId: Number(values.wineId),
        };
        close && close();
        submit && submit(data);
      }
    });
  };

  render() {
    const { quantityComments } = this.props.view;
    const { personData, commodityData } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    const selectAfter = (
      <Select defaultValue={quantityComments} onChange={this.handleSelect} style={{ width: 55 }}>
        <Option value="瓶">瓶</Option>
        <Option value="箱">斤</Option>
      </Select>
    );
    const Desc = (
      <div style={{ fontSize: '14px' }}>
        <span style={{ color: 'red' }}>*买入时利润计算公式:</span>
        <p>(公司核定买入价-购买人买入价)× 数量 × 利润分成比</p>
        <span style={{ color: 'red' }}>*利润分成比:</span>
        <p>例， 4:6 是指个人利润占总利润的40%，公司利润占总利润的60% </p>
      </div>
    );
    return (
      <Row>
        <Col span={14}>
          <Form {...formItemLayout} onSubmit={this.handleSubmit} className={styles.formcontain}>
            <Form.Item label={'人员'}>
              {getFieldDecorator('staffId', {
                rules: [{ required: true, message: '请输入工作人员' }],
              })(
                <Select
                  showSearch
                  placeholder="请输入工作人员"
                  filterOption={false}
                  onSearch={(value: any) => {
                    this.props.dispatch({
                      type: 'order/soldSearch',
                      payload: { comments: value },
                    });
                  }}
                  onChange={() => {}}
                >
                  {personData.length > 0
                    ? personData.map((item: any) => (
                        <Option value={item.id}>
                          {item.name} （{item.phoneNumber}）
                        </Option>
                      ))
                    : null}
                </Select>,
              )}
            </Form.Item>
            <Form.Item label={'商品名'}>
              {getFieldDecorator('wineId', {
                rules: [{ required: true, message: '请输入商品' }],
              })(
                <Select
                  showSearch
                  // value={value}
                  placeholder="请输入商品"
                  filterOption={false}
                  onSearch={(value: any) => {
                    this.props.dispatch({
                      type: 'order/commoditySearch',
                      payload: { comments: value },
                    });
                  }}
                  onChange={() => {}}
                >
                  {commodityData.length > 0
                    ? commodityData.map((item: any) => (
                        <Option value={item.id}>
                          {item.name}（{item.comments}）
                        </Option>
                      ))
                    : null}
                </Select>,
              )}
            </Form.Item>
            <Form.Item label={'公司核定单价'}>
              {getFieldDecorator('companyPrice', {
                rules: [
                  { required: true, pattern: /^[1-9]\d*$/, message: '请输入正确的商品核定单价' },
                ],
              })(<Input prefix="￥" suffix="RMB" placeholder="请输入商品核定单价" />)}
            </Form.Item>
            <Form.Item label={'购入单价'}>
              {getFieldDecorator('staffPrice', {
                rules: [
                  { required: true, pattern: /^[1-9]\d*$/, message: '请输入正确的商品购入单价' },
                ],
              })(<Input prefix="￥" suffix="RMB" placeholder="请输入商品购入单价" />)}
            </Form.Item>
            <Form.Item label={'数量'}>
              {getFieldDecorator('quantity', {
                rules: [{ required: true, pattern: /^[1-9]\d*$/, message: '请输入正确的数量' }],
                validateFirst: true,
              })(<Input placeholder="请输入数量" addonAfter={selectAfter} />)}
            </Form.Item>
            <Form.Item label={'运费'}>
              {getFieldDecorator('freight', {
                rules: [{ pattern: /^[1-9]\d*$/, message: '请输入正确的运费' }],
              })(<Input prefix="￥" suffix="RMB" placeholder="请输入运费" />)}
            </Form.Item>
            <Form.Item label={'其它费用'}>
              {getFieldDecorator('otherFee', {
                rules: [{ pattern: /^[1-9]\d*$/, message: '请输入正确的费用' }],
              })(<Input prefix="￥" suffix="RMB" placeholder="请输入其它费用" />)}
            </Form.Item>
            <Form.Item label={'其它费用备注'}>
              {getFieldDecorator('otherFeeComments')(
                <TextArea rows={2} placeholder="请输入其它费用备注" />,
              )}
            </Form.Item>
            <Form.Item label={'利润分成比'}>
              {getFieldDecorator('companyProfitProportion', {
                rules: [{ required: true }],
              })(
                <Select>
                  <Option value="0.4">4:6</Option>
                  <Option value="0.5">5:5</Option>
                  <Option value="0.6">6:4</Option>
                </Select>,
              )}
            </Form.Item>
            <Form.Item label={'成交时间'}>
              {getFieldDecorator('dealTime', {
                rules: [{ required: true, message: '请选择成交时间' }],
              })(<DatePicker onChange={() => {}} />)}
            </Form.Item>
            <Form.Item label={'备注'}>
              {getFieldDecorator('comments', {})(<TextArea rows={4} />)}
            </Form.Item>
          </Form>
        </Col>
        <Col span={8}>
          <Alert
            message={
              <p style={{ color: '#1890FF', fontWeight: 'bold', marginBottom: '10px' }}>备注说明</p>
            }
            description={Desc}
            type="info"
          />
        </Col>
      </Row>
    );
  }
}

export default connect(({ order }: any) => ({
  view: order.view,
  personData: order.personData,
  commodityData: order.commodityData,
}))(
  Form.create({
    mapPropsToFields(props: any) {
      return {
        staffId: Form.createFormField({
          value: props.view.staffId,
        }),
        wineId: Form.createFormField({
          value: props.view.wineId,
        }),
        companyPrice: Form.createFormField({
          value: props.view.companyPrice,
        }),
        staffPrice: Form.createFormField({
          value: props.view.staffPrice,
        }),
        quantity: Form.createFormField({
          value: props.view.quantity,
        }),
        freight: Form.createFormField({
          value: props.view.freight,
        }),
        otherFee: Form.createFormField({
          value: props.view.otherFee,
        }),
        otherFeeComments: Form.createFormField({
          value: props.view.otherFeeComments,
        }),
        companyProfitProportion: Form.createFormField({
          value: String(props.view.companyProfitProportion),
        }),
        description: Form.createFormField({
          value: props.view.description,
        }),
        dealTime: Form.createFormField({
          value: moment(props.view.dealTime),
        }),
        comments: Form.createFormField({
          value: props.view.comments,
        }),
      };
    },
  })(Buy),
);
